<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(img,index) in imgs" :key="index">
                <img :src="img">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination">

        </div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

<script>

import Swiper from "swiper";//引入js文件
import "swiper/css/swiper.css"; //引入css文件，背后是webpack的功劳。
import axios from "axios";

export default {
    name:"Banner",
    data(){
        return {
           imgs:[]
        }
    },
    created(){
        axios({
            url:"/bannerImgs"
        })
        .then(res=>{
            // console.log("后端响应回来了");

            this.imgs = res.data; //把后端的数据赋给了imgs；           
           
            // 当数据引起的dom发生变化后，vue会调用$nextTick里的回调函数
            this.$nextTick(()=>{
                this.createSwiper();
            });

        })
    },
    mounted(){
        console.log("mounted");
    //    this.createSwiper();// 不行的，
    },
    methods:{
        createSwiper(){
             var mySwiper = new Swiper('.swiper-container', {
                // direction: 'vertical', // 垂直切换选项
                autoplay:true,
                loop: true, // 循环模式选项

                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },

                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                }
            })
        }
    }

}
</script>

<style scoped>
/* @import url("swiper/css/swiper.css"); */

.swiper-container {
  width: 100%;
  height: 2rem;
}

.swiper-container img {
  width: 100%;
  height: 100%;
}
</style>
